<template>
<div>
<!--  新增-->
  <el-dialog title="新增讲师"  :visible.sync="insertformstatus" width="30%">
    <el-form ref="insertupform" :rules="rules"  :model="insertupform"  >
      <el-form-item label="姓名" prop="name" >
        <el-input  v-model="insertupform.name" placeholder="姓名" ></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phone" >
        <el-input  v-model="insertupform.phone" placeholder="手机号" ></el-input>
      </el-form-item>
      <el-form-item label="讲师简介" prop="intro" >
        <el-input  v-model="insertupform.intro" placeholder="讲师简介" ></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email" >
        <el-input  v-model="insertupform.email" placeholder="邮箱" ></el-input>
      </el-form-item>
      <el-form-item label="上传图" prop="imageUrl" >
        <!--      action="http://localhost:8888/sys/car/upload"       使用绝对路径-->
        <!--         :headers="token" action不走路由转发，需要自己带上请求头 -->
        <el-upload
            class="avatar-uploader"
            action="http://localhost:9000/core/teacher/upload"
            :headers="token"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" width="100px" height="100px"/>
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
                        <el-button @click="insertquxiaoup">取 消</el-button>
                        <el-button @click="insertchongzhi">重 置</el-button>
                        <el-button type="primary" @click="insertsaveupForm" >确 定</el-button>
                    </span>
  </el-dialog>
<!--  修改框-->
  <el-dialog title="修改信息"  :visible.sync="upformstatus" width="80%">
    <el-form ref="upformDate"  :model="upform"  :rules="inrules" >
      <el-form-item label="id" prop="phone"  style="display: none" >
        <el-input v-model="upform.id" placeholder="id"></el-input>
      </el-form-item>
      <el-form-item    style="width: 100%" >
        <el-input :disabled="true"  placeholder="讲师个人信息" value="讲师个人信息" style="width: 80%;background: #F4F4F5"></el-input>
      </el-form-item>
      <table style="width: 100%">

        <tr style="width: 100%">
          <td width="50%"><el-form-item label="手机号" prop="phone" style="display: inline;width: 40%">
            <el-input :disabled="true" v-model="upform.phone" placeholder="手机号" style="width: 80%"></el-input>
          </el-form-item></td>
          <td width="50%"><el-form-item label="姓名" prop="name" style="display: inline;width: 40%">
            <el-input v-model="upform.name" placeholder="用户名" style="width: 80%"></el-input>
          </el-form-item></td>
        </tr>
        <tr>
          <td>
            <el-form-item label="邮箱：" prop="email">
              <el-input v-model="upform.email" placeholder="邮箱" style="width: 80%"></el-input>
            </el-form-item>
          </td>

          <td>
            <el-form-item label="序号" prop="sort">
              <el-input v-model="upform.sort" placeholder="序号" style="width: 80%"></el-input>
            </el-form-item>
          </td>
        </tr>
      </table>

      <el-form-item label="简介" prop="position">
        <el-input
            type="textarea"
            :rows="2"
            placeholder="简介"
            v-model="upform.intro">
        </el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
                        <el-button @click="quxiaoup">取 消</el-button>
                        <el-button type="primary" @click="saveupForm" >确 定</el-button>
                    </span>
  </el-dialog>
<!--审核-->
  <el-dialog title="审核讲师"  :visible.sync="fcformstatus" width="30%">
    <el-form ref="fcupform"  :model="fcupform"  >
      <el-form-item label="id" prop="phone"  style="display: none" >
        <el-input v-model="fcupform.id" placeholder="id"></el-input>
      </el-form-item>
      <template>
        <el-radio v-model="radio" label="0">通过</el-radio>
        <el-radio v-model="radio" label="2">不通过</el-radio>
      </template>
      <el-form-item label="审核意见" prop="phone">
        <el-input v-model="fcupform.opinion" placeholder="审核意见" style="width: 80%"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
                        <el-button @click="fcquxiaoup">取 消</el-button>
                        <el-button type="primary" @click="fcsaveupForm" >确 定</el-button>
                    </span>
  </el-dialog>
<!--  搜索框-->
  <el-form :inline="true" :model="formInline" ref="formInline" style="padding-top: 30px">
    <el-form-item label="讲师名称">
      <el-input v-model="formInline.name" placeholder="讲师名称"></el-input>
    </el-form-item>
    <el-form-item label="手机号">
      <el-input v-model="formInline.phone" placeholder="手机号"></el-input>
    </el-form-item>
    <el-form-item label="审核状态">
      <el-select v-model="formInline.status" placeholder="审核状态">
        <el-option label="审核通过" value="0"></el-option>
        <el-option label="待审核" value="3"></el-option>
        <el-option label="未通过" value="2"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit"><i class="el-icon-search"></i>查询</el-button>
      <el-button type="info" @click="Reset"><i class="el-icon-refresh"></i>重置</el-button>
      <el-button type="success" @click="insert"><i class="el-icon-refresh"></i>新增</el-button>
    </el-form-item>
  </el-form>
<!--  表单-->
  <el-table
      :data="tableData"
      border
      style="width: 100%">
    <el-table-column
        fixed
        prop="id"
        label="序号">
    </el-table-column>
    <el-table-column
        prop="phone"
        label="手机号">
    </el-table-column>
    <el-table-column
        prop="name"
        label="讲师姓名">
    </el-table-column>
    <el-table-column
        prop="email"
        label="邮箱">
    </el-table-column>
    <el-table-column
        prop="fencheng"
        label="分成比例">
      <template slot-scope="scope">
        <span v-if="scope.row.fencheng!=null">{{scope.row.fencheng}}%</span>
        <span v-else>等待审核设置</span>
      </template>
    </el-table-column>
    <el-table-column
        prop="status"
        label="审核状态">
      <template slot-scope="scope">
        <el-button type="primary" v-if="scope.row.status==3" disabled>待审核</el-button>
        <el-button type="success" v-else-if="scope.row.status==0" disabled>已审核</el-button>
        <el-button type="danger" v-else disabled>未通过</el-button>
      </template>
    </el-table-column>
    <el-table-column
        fixed="right"
        label="操作">
      <template slot-scope="scope">
<!--        <el-button type="success">修改</el-button>-->
        <el-button @click="handleClick(scope.row)" type="success" size="small">修改</el-button>
        <el-button type="primary" size="small" @click="fenchengClick(scope.row)">审核</el-button>
      </template>
    </el-table-column>
  </el-table>
<!--  分页-->
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5,10,15]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
  </el-pagination>
</div>
</template>

<script>
export default {
  name: "jslist",
  data(){
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号不能为空'));
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
        console.log(reg.test(value));
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error('请输入正确的手机号'));
        }
      }
    };
    return{
      token:{token:sessionStorage.getItem("token")},
      //新增上传图片后回显路径
      imageUrl: '',
      //分页
      currentPage:1,
      pageSize:5,
      total:0,
      //查询表单
      formInline:{
      },

      //表格数据
      tableData:[],
      value:1,

      //修改信息框
      upform: {},
      upformstatus:false,

      //修改分成
      fcformstatus:false,
      fcupform:{},

      //审核状态
      radio:"",

      //新增对象
      insertupform:{},
      insertformstatus:false,
      //新增表单验证
      rules:{
        name:[
          { required: true, message: '请输入讲师名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        phone:[
          {validator: checkPhone, trigger: 'blur'}
        ],
        intro:[
          { required: true, message: '请输入个人简介', trigger: 'blur' },
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
        ],
      },
      inrules:{
        name:[
          { required: true, message: '请输入讲师名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        intro:[
          { required: true, message: '请输入个人简介', trigger: 'blur' },
        ],
        phone:[
          {validator: checkPhone, trigger: 'blur'}
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
        ]
      }

    }

  },
  //初始化
  created() {
    this.init();
  },
  methods:{
    init(){
      var that = this;
      this.$http.post('/core/teacher/findTeacher/'+this.currentPage+"/"+this.pageSize,this.formInline).then(function (resp){
        that.tableData=resp.data.result.records
        that.total=resp.data.result.total
      })
    },
    //分页改变
    handleSizeChange(val) {
      this.pageSize=val;
      this.init();
    },
    handleCurrentChange(val) {
      this.currentPage=val;
      this.init();
    },

    //查询
    onSubmit(){
    this.init()
    },
    //重置查询表
    Reset(){
      this.$refs.formInline.resetFields();
      this.formInline={}
    },
    //修改
    handleClick(item){
    // console.log(item)
      this.upformstatus=true
      this.upform=item
    },
    //修改状态
    changeStatus(id,status){
      var that = this;
      this.$http.get('/core/teacher/shenhejiangshi?id='+id+"&status="+status).then(function (resp) {
        if(resp.data.code==200){
          that.init()
        }
      })

    },

  //  修改表单操作=========================================

    //取消
    quxiaoup(){
      this.upformstatus=false
      this.$refs.upformDate.resetFields();
      this.upformDate={}
    },
    //提交
    saveupForm(){
      var that = this;
      this.$refs.upformDate.validate((valid) => {
        if (valid) {
          this.$http.post("/core/teacher/updateTeacherById",this.upform).then(function (resp){
            if(resp.data.code==200){
              that.upformstatus=false
              that.$refs.upformDate.resetFields();
              that.upformDate={}
              that.init()
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    // 审核=====================================
    fenchengClick(item){
      this.fcformstatus=true
      this.fcupform.id=item.id

    },
    //取消
    fcquxiaoup(){
      this.fcformstatus=false
      this.$refs.fcupform.resetFields();
      this.fcupform={}
      this.radio=""
    },
    fcsaveupForm(){
      var that = this;
      if(this.radio==2 && this.fcupform.opinion==undefined){
        that.$message.error("不通过请输入理由")
      }else {
        that.fcupform.status=that.radio
        this.$http.post('/core/teacher/updateTeacherById', this.fcupform).then(function (resp) {
          if (resp.data.code == 200) {
            that.fcformstatus = false
            that.$refs.fcupform.resetFields();
            that.fcupform = {}
            that.init()
          }
        })
      }
    },
    //新增===================================================
    //新增
    insert(){
      this.insertformstatus=true;
    },
    //新增取消
    insertquxiaoup(){
      this.insertupform={};
      this.$refs.insertupform.resetFields();
      this.insertformstatus=false;
    },
    //新增提交
    insertsaveupForm(){
      var that=this;
      this.$refs.insertupform.validate((valid) => {
        if (valid) {
          this.$http.post("/core/teacher/insertTeacher",this.insertupform).then(function (resp){
            if (resp.data.code == 200) {
              that.insertformstatus = false
              that.$refs.insertupform.resetFields();
              that.insertupform = {}
              that.init()
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },
    //新增重置
    insertchongzhi(){
      this.insertupform={};
      console.log(this.insertupform)
      this.$refs.insertupform.resetFields();
    },

    //上传图片成功
    //图片上传成功后执行
    handleAvatarSuccess(res, file){
      console.log(res)
      this.insertupform.avatar=res
      //回显路径
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {

      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isLt2M;
    },
  }
}
</script>

<style scoped>
td{
  padding-top: 15px;
  padding-bottom: 15px;
}
</style>